<template>
  <div class="personal">
    <!-- 个人信息 -->
    <div class="profile">
      <img :src="userInfo.head_img" alt />
      <div class="profile-center">
        <div class="name">
          <span
            :class="{
              iconfont: true,
              iconxingbienan: userInfo.gender == 1,
              iconxingbienv: userInfo.gender == 0,
            }"
            :style="{
              color: userInfo.gender == 1 ? 'skyblue' : '#ff000078',
            }"
          ></span>
          {{ userInfo.nickname }}
        </div>
        <div class="time">{{ userInfo.create_date }}</div>
      </div>
      <router-link :to="'/editUser/' + userInfo.id">
        <span style="font-size: 12px; padding: 24px 0 24px 10px; float: left"
          >个人信息</span
        ><span
          class="iconfont iconjiantou1"
          style="padding: 22px 2px 22px 0; float: left"
        ></span>
      </router-link>
    </div>
    <!-- 单元格 -->
    <itCell title="我的关注" desc="关注的用户"></itCell>
    <itCell title="我的跟帖" desc="跟帖/回复"></itCell>
    <itCell title="我的收藏" desc="文章/视频"></itCell>
    <itCell title="设置"></itCell>

    <!-- 退出登录 -->
    <itButton
      type="error"
      style="margin-top: 240px"
      @click="outLogin_show = true"
      >退出</itButton
    >
    <van-dialog
      style="padding: 0 30px"
      v-model="outLogin_show"
      title="是否要退出登录?"
      show-cancel-button
      confirmButtonColor="red"
      @confirm="out_login"
    >
    </van-dialog>
    <!-- 退出登录 End -->
  </div>
</template>

<script>
// 自定义：单元格组件
import itCell from "@/components/itCell.vue";
// 自定义：按钮组件
import itButton from "@/components/itButton.vue";
// 导入apis中的user.js
import { userInfo } from "@/apis/user.js";
// 导入Moment框架
import moment from "moment";
// 导入axios
import axios from "@/utils/myAxios.js";

export default {
  // 注册组件
  components: {
    itCell,
    itButton,
  },
  data() {
    return {
      userInfo: "",
      outLogin_show: false,
    };
  },
  methods: {
    // 退出登录
    out_login() {
      // console.log("不错不错");

      // 清楚浏览器token
      // localStorage.setItem('token', '');   // 方式1
      localStorage.removeItem("token"); // 方式2
      // 清楚用户信息
      localStorage.removeItem("userInfo"); // 方式2
      // 页面跳转到首页
      this.$toast.success("已退出登录");
      setTimeout(() => {
        this.$router.push({ path: "/index" });
      }, 600);
    },
  },
  async mounted() {
    // console.log(this.$route.params);    接收到的参数
    let res = await userInfo(this.$route.params.id);
    // console.log(res.data.data);

    // 修改数据
    // 用moment框架解析出时间格式, 并修改掉数据中的时间格式
    res.data.data.create_date = moment(res.data.data.create_date).format(
      "YYYY-MM-DD"
    );
    // 给图片增加前缀地址
    res.data.data.head_img = axios.defaults.baseURL + res.data.data.head_img;

    // 将数据赋给this.userInfo
    this.userInfo = res.data.data;
  },
};
</script>


// 样式:
<style lang='less' scoped>
.personal {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
}
a {
  color: #666;
}
.profile {
  display: flex;
  padding: 20px 10px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 5px #ddd solid;

  img {
    width: 70 / 360 * 100vw;
    height: 70 / 360 * 100vw;
    border-radius: 50%;
  }

  .profile-center {
    flex: 1;
    padding: 0 10px;
  }

  .name {
    color: #333;
    margin-bottom: 8px;
    span {
      color: #75b9eb;
    }
  }

  .time {
    color: #999;
    font-size: 14px;
    margin-top: 5px;
  }
}
</style>
